import { useFormik } from 'formik'

function App() {
  let form = useFormik({
    initialValues: { username: '', password: '' },
    validate: values => {
      const errors = {}
      if (!values.username) errors.username = '请输入用户名'
      if (!values.password) errors.password = '请输入密码'
      return errors
    },
    onSubmit: values => {
      console.log(values)
    }
  })
  return (
    <form onSubmit={form.handleSubmit}>
      <p>
        <input
          type="text"
          name="username"
          value={form.values.username}
          onChange={form.handleChange}
          onBlur={form.handleBlur}
        ></input>
        {form.touched.username && form.errors.username ? form.errors.username : ''}
      </p>
      <p>
        <input
          type="password"
          name="password"
          value={form.values.password}
          onChange={form.handleChange}
          onBlur={form.handleBlur}
        ></input>
        {form.touched.password && form.errors.password ? form.errors.password : ''}
      </p>
      <input type="submit"></input>
    </form>
  )
}

export default App
